<template>
  <div class="app-container">
     <el-row :gutter="20">
       <el-col :span="6" :xs="24">
         <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div>
          <div>
            <div class="text-center">
              <div class="user-info-head">
                <img src="@/assets/avatar/avatar.gif" alt="">
              </div>
            </div>
            <ul class="list-group">
              <li class="list-group-item">
                <i class="el-icon-user-solid" />
                <span>用户名</span>
                <div class="pull-right">{{ userData.username }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="id-card" />
                <span>姓名</span>
                <div class="pull-right">{{ userData.realName }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="gender" />
                <span>性别</span>
                <div class="pull-right">{{ userData.gender=='1' ? '男' : userData.gender == '0' ? '女' : '保密' }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="age" />
                <span>年龄</span>
                <div class="pull-right">{{ userData.age }}</div>
              </li>
              <li class="list-group-item">
                <i class="el-icon-mobile-phone" />
                <span>手机号码</span>
                <div class="pull-right">{{ userData.phone }}</div>
              </li>
              <li class="list-group-item">
                <i class="el-icon-s-custom" />
                <span>所属角色</span>
                <div class="pull-right">{{ roleName }}</div>
              </li>
              <li class="list-group-item">
                <i class="el-icon-date" />
                <span>注册时间</span>
                <div class="pull-right">{{ userData.createdTime }}</div>
              </li>
            </ul>
          </div>
         </el-card>
       </el-col>
       <el-col :span="18" :xs="24">
         <el-card>
          <div slot="header" class="clearfix">
            <span>基本资料</span>
          </div>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="基本资料" name="userinfo">
              <userInfo :user="userData" />
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="resetPwd">
              <resetPassword />
            </el-tab-pane>
            <el-tab-pane label="更新安全问题" name="updateQa">
              <resetQa />
            </el-tab-pane>
          </el-tabs>
         </el-card>
       </el-col>
     </el-row>
  </div>
</template>

<script>
import userInfo from './userInfo.vue'
import resetPassword from './resetPassword.vue'
import resetQa from './resetQa.vue'
export default {
  name:"Profile",
  components: { userInfo, resetPassword, resetQa },
  data () {
    return {
      userData: {},
      activeTab: 'userinfo',
      roleName: undefined
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      this.getRequest('/portal/user/').then(resp => {
        this.userData = resp.data;
        this.roleName = resp.data.roles[0].roleName;
      });
    }
  }
}

</script>
<style lang='scss' scoped>
  .app-container {
    .text-center {
      text-align: center;
      .user-info-head {
        position: relative;
        display: inline-block;
        height: 120px;
        img {
          width: 120px;
          height: 120px;
          border-radius: 50%;
        }
      }
    }

    .list-group {
      padding-left: 0;
      list-style: none;

      i {
        font-style: 14px !important;
      }

      .list-group-item {
        border-bottom: 1px solid #e7eaec;
        border-top: 1px solid #e7eaec;
        padding: 13px 0;
        margin-bottom: -1px;
        .pull-right {
          float: right !important;
          font-size: 13px;
        }
        
        span {
          font-size: 13px;
          margin-left: 3px;
        }
      }
    }
  }
</style>